<template>
  <div class="nickname_page">
    <!-- 导航 开始 -->
    <nav-bar title="设置手机"></nav-bar>
    <!-- 导航 end -->

    <div class="form_box">
      <div class="form_cell">
        <div class="input_box">
          <input
            type="number"
            v-model="form.account"
            maxlength="11"
            class="a_input"
            placeholder="请输入你要绑定的手机号"
          />
        </div>
      </div>
      <div class="form_cell">
        <div class="input_box">
          <input
            type="text"
            v-model="form.code"
            maxlength="6"
            class="a_input"
            placeholder="请输入验证码"
          />
        </div>
        <button
          class="btn"
          :disabled="time < 60"
          @click="sendCode"
          v-text="time < 60 ? time + 's后获取' : '发送验证码'"
        ></button>
      </div>
    </div>

    <div class="btn_group">
      <button class="btn" v-loading="loading" @click="updatePhone">保存</button>
    </div>
  </div>
</template>
<script>
import {
  CHANGE_PERSONAL_CHANGEMOBILE,
  GET_MESSAGE_CODE,
} from "@/http/interface";
import { showToast, checkPhone } from "@/utils/utils";
export default {
  data() {
    return {
      form: {},
      time: 60,
      timeInterval: "",
      loading: false,
    };
  },
  methods: {
    // 获取短信验证码
    async sendCode() {
      let _this = this;
      let o = this.form;
      let time = this.time;
      if (!o.account) {
        showToast({
          message: "请输入手机号",
        });
        return false;
      }

      if (!checkPhone(o.account)) {
        showToast({
          message: "手机号格式不正确",
        });
        return false;
      }
      let timeInterval = setInterval(function () {
        if (time <= 0) {
          clearInterval(timeInterval);
          _this.time = 60;
          return false;
        }
        time--;
        _this.time = time;
      }, 1000);
      let res = await this.$axios.get(GET_MESSAGE_CODE, {
        params: { mobile: o.account },
      });
      if (res.code != 200) {
        showToast({
          message: res.message,
        });
        return false;
      }
      showToast({
        message: "发送成功",
        type: "success",
      });
    },

    // 修改手机号码
    async updatePhone() {
      let _this = this;
      let o = this.form;
      let time = this.time;
      if (!o.account) {
        showToast({
          message: "请输入手机号",
        });
        return false;
      }

      if (!checkPhone(o.account)) {
        showToast({
          message: "手机号格式不正确",
        });
        return false;
      }

      let res = await this.$axios.post(CHANGE_PERSONAL_CHANGEMOBILE, {
        mobile: o.account,
        code: o.code,
      });
      if (res.code != 200) {
        showToast({
          message: res.message,
        });
        return false;
      }
      showToast({
        message: "修改成功",
        type: "success",
      });
      this.$router.push({
        path:'/my'
      })
    },
  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/my/phone.less";
</style>